<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { getClusterList } from '@/api/cluster';
import { useClusterStore } from '@/stores/cluster';

const clusters = ref([]);
const selectedCluster = ref(null);
const showPicker = ref(false);
const fieldValue = ref('');
const router = useRouter();
const clusterStore = useClusterStore();

// 菜单选项配置
const menuItems = [
  {
    icon: 'apps-o',
    text: 'Dolphin 运维',
    color: '#1989fa',
    handler: handleDophinOpsClick
  },
  {
    icon: 'cluster-o',
    text: 'Flink 运维',
    color: '#07c160',
    badge: '新'
  },
  {
    icon: 'peer-pay',
    text: 'Kafka 运维',
    color: '#ff976a'
  },
  {
    icon: 'warning-o',
    text: '告警设置',
    color: '#ee0a24'
  },
  {
    icon: 'chart-trending-o',
    text: '任务状态统计',
    color: '#7232dd'
  },
  {
    icon: 'more-o',
    text: '更多功能',
    color: '#969799'
  }
];

const fetchClusters = async () => {
  try {
    const data = await getClusterList();
    clusters.value = data.map(cluster => ({
      id: cluster.id,
      clusterName: cluster.clusterName,
      version: cluster.version,
      url: cluster.url,
      token: cluster.token,
    }));
  } catch (error) {
    console.error('获取集群列表失败:', error);
  }
};

const onConfirm = ({ selectedOptions }) => {
  const selected = selectedOptions[0];
  selectedCluster.value = clusters.value.find(cluster => cluster.id === selected.value);
  fieldValue.value = selected.text;
  showPicker.value = false;
  showToast({
    message: `已选择集群: ${selected.text}`,
    icon: 'success'
  });

  if (selectedCluster.value) {
    clusterStore.setCurrentCluster(selectedCluster.value);
    router.push({ name: 'DolphinProject', params: { clusterId: selectedCluster.value.id} });
  }
};

function handleDophinOpsClick() {
  showPicker.value = true;
}

onMounted(fetchClusters);
</script>

<template>
  <div class="ops-menu">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="title">运维中心</h2>
      <p class="subtitle">集中管理您的所有运维任务</p>
    </div>

    <!-- 菜单网格 -->
    <div class="menu-grid">
      <div v-for="(item, index) in menuItems" 
           :key="index"
           class="menu-item"
           @click="item.handler"
      >
        <div class="icon-wrapper" :style="{ backgroundColor: item.color + '10' }">
          <van-icon 
            :name="item.icon" 
            :color="item.color"
            size="24"
          />
        </div>
        <span class="item-text">{{ item.text }}</span>
        <van-tag 
          v-if="item.badge"
          type="primary" 
          class="badge"
        >
          {{ item.badge }}
        </van-tag>
      </div>
    </div>

    <!-- 当前选择的集群信息卡片 -->
    <div v-if="fieldValue" class="cluster-info">
      <van-cell-group inset>
        <van-cell>
          <template #title>
            <div class="cell-title">
              <van-icon name="cluster-o" color="#1989fa" />
              <span>当前选择的集群</span>
            </div>
          </template>
          <template #value>
            <span class="cluster-name">{{ fieldValue }}</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 集群选择器弹出层 -->
    <van-popup 
      v-model:show="showPicker" 
      position="bottom" 
      round 
      closeable
      destroy-on-close
    >
      <div class="picker-header">选择集群</div>
      <van-picker
        :columns="clusters.map(cluster => ({ text: cluster.clusterName, value: cluster.id }))"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<style scoped>
.ops-menu {
  padding: 20px 16px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
}

.title {
  font-size: 24px;
  font-weight: 600;
  color: #323233;
  margin: 0;
  line-height: 1.4;
}

.subtitle {
  font-size: 14px;
  color: #969799;
  margin: 4px 0 0 0;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 8px 0;
}

.menu-item {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.menu-item:active {
  transform: scale(0.98);
}

.icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.item-text {
  font-size: 14px;
  font-weight: 500;
  color: #323233;
  margin-top: 8px;
}

.badge {
  position: absolute;
  top: 12px;
  right: 12px;
  transform: scale(0.8);
}

.cluster-info {
  margin-top: 24px;
}

.cell-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.cluster-name {
  color: #1989fa;
  font-weight: 500;
}

.picker-header {
  text-align: center;
  padding: 16px;
  font-weight: 500;
  color: #323233;
  border-bottom: 1px solid #ebedf0;
}

:deep(.van-popup) {
  max-height: 50vh;
}
</style>